<template>
  <div>
<!--    <el-carousel indicator-position="none" height="400px" arrow="nerver" :interval="5000">
      <el-carousel-item v-for="item in blogList" :key="item">
        <div class="item-box">
          <img :src="item" class="carimg" />
          <div class="desc-box">
            <h1>{{ item.blogTitle }}</h1>
            <p>{{ item.blogText }}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>-->
    <el-row :gutter="20">
      <el-col :span="24" >
        <el-card v-for="article in blogList" :key="article.blogId">
          <div slot="header">
            <router-link class="main-text"  v-html="article.blogTitle"  :to="{path:'/detail', query:{id:article.blogId}}"></router-link>
            <div class="article-info">
              <el-tag effect="dark" size="mini">原创</el-tag>
              浏览量：{{article.accessNum}} 分类：
              <router-link
                class="link secondary-text"
                :to="'/category/'+article.category"
              >{{article.category}}</router-link>
            </div>
          </div>
          <div class="tabloid">
            <span v-html="article.blogText"></span>
          </div>
          <i class="el-icon-user-solid article-icon">{{article.authorName}}</i>
          <i class="el-icon-date article-icon">{{article.updateDate}}</i>
          <i class="el-icon-price-tag article-icon">
            <router-link
              class="tag"
              v-for="(tag,index) in article.tags"
              :key="index"
              v-text="tag"
              :to="'/tag/'+tag"
            ></router-link>
          </i>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'contentList',
  props:{
    sidebarId:{
      type: Number,
      default: 0
    }

  },
  data () {
    return {
      contentList: [
        {
          name: 'essay1',
          type: 'essay',
          title: '刚发布！Python 一二线城市月薪 15K 起！12 月再夺语言榜首',
          content: '',
          imgUrl: require('@/assets/img/homepage/headImgDefault.png'),
          forum: 'CSDNedu',
          category: '',
          date: '39分钟前',
          read: '518',
          comment: '1'
        },
      ],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      blogList:[],
    }
  },
  computed:{
    secondList1:function(){
      return this.blogList.slice(6);     // searchList原始数据
    }
  },
  methods: {

    /**
     * 获取全部博客   todo: 改为推荐博客
     */
    getBlogList(sidebarId){
      if(this.sidebarId===0){
        this.$http({
          url: this.$http.adornUrl('/blog/list/blog'),
          method: 'get',
          params: this.$http.adornParams({
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.blogList = data.page.records
            this.totalPage=data.page.total
          } else {
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      }
      else {
        this.$http({
          url: this.$http.adornUrl(`/blogSidebar/${sidebarId}`),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.blogList = data.list
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      }




    },
    /**
     * 获取详情博客
     */
    getBlogDetail(id){
      console.log("id"+id)
      this.$router.push({
        path:'/detail',
        query:{
          id:id
        }
      });
    }
  },
  created() {
    console.log(this.sidebarId)
    this.getBlogList(this.sidebarId)
  }
}
</script>

<style scoped>
.item-box {
  position: relative;
  width: 100%;
  height: 100%;
}
.carimg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
}
.desc-box {
  position: absolute;
  bottom: 0;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 40px;
  margin-left: -250px;
  margin-top: -20px;
  text-align: center;
}
.el-card {
  margin-top: 20px;
}
.article-info {
  margin-top: 10px;
  color: #909399;
  font-size: 13px;
}
.article-icon,
.article-icon .tag {
  color: #909399;
  font-size: 13px;
  margin-right: 10px;
  text-decoration: none;
}
.article-icon .tag:hover {
  color: #409eff;
  cursor: pointer;
}
.tabloid {
  color: #606266;
  height: 170px;
  overflow: hidden;
  font-size: 14px;
  margin-bottom: 10px;
}
</style>

